import React, { Component } from 'react';
import { Button, List } from 'antd-mobile';
import router from 'umi/router';
import MyNavBar from 'components/navbar';
import commonStyles from 'utils/common.less';
import styles from './index.less';
import { MyIcon } from 'components/my-icon';
import { ENTER_TYPE, PROCESS_STATUS, COUNT_DOWN } from 'utils/Enum';
import { connect } from 'dva';
@connect(({ signTheSuccessModel }) => ({ signTheSuccessModel }))
class AuthenticationSuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {}
	}

	async componentDidMount() {
		const { location: { query: result } } = this.props
		
		let { dispatch } = this.props
		await dispatch({
			type: 'signTheSuccessModel/countDown',
			payload: COUNT_DOWN.RESULT_TIME
		})
		if (result) {
			this.countDown()
		}
	}

	countDown = async () => {
		//开始倒计时表示查询的结果已经返回 就消除loading动画
		this.timer = setInterval(async () => {
			let { signTheSuccessModel: { count }, dispatch } = this.props
			count = count - 1
			if (count < 0) {
				this.goNext()
			} else {
				await dispatch({
					type: 'signTheSuccessModel/countDown',
					payload: count
				})
			}
		}, 1000)
	}
	//页面跳转
	goNext = () => {
		const { location: { query: { result } } } = this.props
		clearInterval(this.timer)
		switch (Number(result)) {
			case PROCESS_STATUS.UNKOWN_SIGN_SUCCESS:
				router.push('SignTheSuccess/SignatureViewer?enterType=' + ENTER_TYPE.INTERIOR)
				break;
			case PROCESS_STATUS.UNKOWN_SIGN_ERROR:
				router.push('/signature')
				break;
			default:
				router.push('SignTheSuccess/SignatureViewer?enterType=' + ENTER_TYPE.INTERIOR)
				break;
		}
	};
	render() {
		const Item = List.Item;
		const { location: { query: { result } } } = this.props
		const { signTheSuccessModel: { count } } = this.props
		return (
			<div className={styles.baseLayout}>
				<MyNavBar title={"签署结果"} backUrl={'/Signature'} gobackStatus={true} />
				<div className={commonStyles.result + " " + styles.resultContent}>
					{
						result == PROCESS_STATUS.UNKOWN_SIGN_SUCCESS ? 
						<>
							<div className={styles.IconImg}>
								<MyIcon type='iconqueren' className={commonStyles.Icon + ' ' + styles.Icon} />
							</div>
							<div className={commonStyles.titleSuccess}><span>恭喜您，签署成功</span></div>
							<div className={styles.footerContainer}>
								<Button 
									type="primary" 
									shape="round"
									onClick={this.goNext}
								>
									查看文件（{count}）
                				</Button>
							</div>
						</> 
						: 
						<>
							<div className={styles.IconImg}>
								<MyIcon type='iconClose' className={commonStyles.Icon + ' ' + styles.errorIcon} />
							</div>
							<div className={commonStyles.titleSuccess}><span>签署失败</span></div>
							<div className={styles.footerContainer}>
								<Button 
									type="primary" 
									shape="round"
									onClick={this.goNext}
								>
									返回（{count}）
								</Button>
							</div>
						</>
					}
				</div>
			</div>
		)
	}
}

export default AuthenticationSuccess;
